<!DOCTYPE html>
<html>
<head>
	<title>页面布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style8.css">
</head>
<body>
	<div class="header">
		<div class="main">
			<div class="logol"></div>
			<div class="search"></div>
			<div class="tel"></div>
		</div>
	</div>
	<div class="nav">
		<div class="main">
			<ul>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>
				<li>网站</li>

			</ul>
		</div>
	</div>
	<div class="banner"></div>
	<div class="con">
		<div class="main"></div>
	</div>
	<div class="footer">
		<div class="main"></div>
	</div>
<!--


布局思路：
	从整体到局部
	从外向里
	从上至下
	从左至右


样式编写顺序：
	1.定位（float position left right bottom top z-index）
	2.宽、高、边距
	3.文字样式
	4.背景样式
	5.过渡 动画

样式书写规范：
	1. 0.5可以写.5，0可以省略
	2. 对于可以简写的属性尽量简写 background margin padding border
	3. 给子元素添加样式前写父级类名
	4. 布局是尽量使用类，不要使用id

问题：
	1.乱码问题  编码
	2.样式引入无效问题（属性丢失，路径错误）
	3.清除浮动问题
	4.定位乱的问题---找绝对定位的父级添加相对定位
	5.a标签鼠标经过无效问题--a:link  a:visited  a:hover  a:active 


兼容性问题(CSS HACK)
	概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号
	CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。
		1、属性级Hack：
			IE6能识别下划线“_”和星号“*”，
			IE7能识别星号“*”，但不能识别下划线”_ ”，
			而firefox两个都不能认识。
		2、选择符级Hack：
			IE6能识别*html .class{}，
			IE7能识别*+html .class{}或者*:first-child+html .class{}。
		3、IE条件注释Hack：
			IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。
			针对所有IE：&lt;!-[if IE]&gt;&lt;!-您的代码-&gt;&lt;![endif]&gt;，
			针对IE6及以下版本：&lt;!-[if it IE 7]&gt;&lt;!-您的代码-&gt;&lt;![endif]-&gt;，
			这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
-->
</body>
</html>